<template>
	<view class="contentTop">
    <div class="topName">
      {{ detailsName }}
    </div>
    <div class="topDeviceData">
      <div class="firBox" >
        <div class="innerContent">
          <div class="num">{{detailsObj.dqsd | setNum}}</div>
          <div class="name">大气湿度</div>
        </div>
      </div>
      <div class="senBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.dqwd | setNum}}</div>
          <div class="name">大气温度</div>
        </div>
      </div>
    </div>
    <div class="topDeviceData">
      <div class="thrBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trd}}</div>
          <div class="name">氮含量</div>
        </div>
      </div>
      <div class="fouBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trddl}}</div>
          <div class="name">电导率</div>
        </div>
      </div>
    </div>
    <div class="topDeviceData">
      <div class="fivBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trfl}}</div>
          <div class="name">肥力</div>
        </div>
      </div>
      <div class="sixBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trj}}</div>
          <div class="name">钾含量</div>
        </div>
      </div>
    </div>
    <div class="topDeviceData">
      <div class="sevBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trl}}</div>
          <div class="name">磷含量</div>
        </div>
      </div>
      <div class="eigBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trsd}}</div>
          <div class="name">土壤湿度</div>
        </div>
      </div>
    </div>
    <div class="topDeviceData">
      <div class="nigBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trsjd}}</div>
          <div class="name">酸碱度</div>
        </div>
      </div>
      <div class="tenBox">
        <div class="innerContent">
          <div class="num">{{detailsObj.trwd}}</div>
          <div class="name">土壤温度</div>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
  import { numToFixed } from '@/untils/index';
	export default {
		data() {
			return {
        detailsObj: {},
        detailsName: ''
			}
		},
    filters: {
      setNum(val){
        return numToFixed(val)
      }
		},
		onLoad(e) {
      this.detailsObj = JSON.parse(e.extObj)
      this.detailsName = e.name
      // console.log(this.detailsObj);
      
		},
		onShow() {
    },
		methods: {

		}
	}
</script>

<style lang="scss">
.contentTop {
  width: 100%;
  min-height: 100vh;
  background-color: #5c3be2;
  .topName {
    width: 100%;
    height: 150rpx;
    line-height: 150rpx;
    text-align: center;
    background-color: #eed6d4;
    font-size: 30rpx;
    font-weight: 600;
  }
  .topDeviceData {
    width: 99.4%;
    padding: 2rpx .3%;
    height: 150rpx;
    background-color: #fff;
    font-size: 30rpx;
    font-weight: 600;
    display: flex;
    justify-content: space-around;
    view ,div {
      width: 49.5%;
      height: 150rpx;
      .innerContent {
        height: 100%;
        width: 100%;
        text-align: center;
        .num {
          margin-top: 10rpx;
          width: 100%;
          font-size: 50rpx;
          font-weight: 600;
          color: #fff;
          height: 80rpx;
          line-height: 80rpx;
        }
        .name {
          height: 40rpx;
          font-size: 30rpx;
          font-weight: 100;
          color: #fff;
          width: 100%;
        }
      }
    }
    .firBox {
      background-color: #5cdf9b;
    }
    .senBox {
      background-color: #5c39ef;
    }
    .thrBox {
      background-color: #a294d1;
    }
    .fouBox {
      background-color: #55645f;
    }
    .fivBox {
      background-color: #a3b53f;
    }
    .sixBox {
      background-color: #943289;
    }
    .sevBox {
      background-color: #9c7f6f;
    }
    .eigBox {
      background-color: #3988e4;
    }
    .nigBox {
      background-color: #9c7f6f;
    }
    .tenBox {
      background-color: #3988e4;
    }
  }
}
</style>
